<template>
    <div class="body">
        <div class="declaration">
            温馨提示：仅供娱乐
        </div>
        <div class="header">
            <div class="titleSec">
                <img src="../assets/img/indexImg1.png" alt="我们不是牛马我们是人1" class="titleSecImg">
                <h1>我们的宗旨是：为每一位牛马“发声”</h1>
                <img src="../assets/img/indexImg2.png" alt="我们不是牛马我们是人2" class="titleSecImg">
            </div>
            <div class="title">
                <p>牛马收益</p>
            </div>
        </div>
        <div class="content">
            <div class="nav">
                <div class="navOne">
                    关于我们
                </div>
                <div class="navTwo">
                    主要功能
                </div>
                <div class="navThree">
                    敬请期待
                </div>
            </div>
            <div class="functionItem">
                <div class="functionOne" @click="toSalaryCalculator()">
                    <p class="functionOneP">实时工资计算器</p>
                </div>
                <div class="functionOne" @click="toPriceCalculator()">
                    <p class="functionOneP">工作性价比计算器</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        methods: {
            toSalaryCalculator() {
                this.$router.push('/salaryCalculator')
            },
            toPriceCalculator() {
                this.$router.push('/priceCalculator')
            }
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .body {
        width: 100%;
        height: 100vh;
        background-color: #8B8C8F;
    }

    .declaration {
        font-size: 20px;
        font-weight: bold;
        color: white;
        margin-left: 50px;
    }

    .header {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    h1 {
        color: rgb(241, 192, 36);
    }

    .title {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p {
        width: 548px;
        height: 187px;
        font-size: 130px;
        color: white;
        font-family: STXinwei;
        text-align: center;
        line-height: 187px;
    }

    .titleSec {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .titleSecImg {
        width: 250px;
        height: 200px;
    }

    .content {
        width: 100%;
        height: 50%;
        background-color: white;
        border-radius: 50px 50px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .nav {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        color: white;
        font-size: 36px;
        text-align: center;
    }

    .navTwo{
        width: 183px;
        height: 62px;
        border-radius: 30px;
        background-color: #F6D15B;
    }

    .navOne,
    .navThree {
        width: 183px;
        height: 62px;
        border-radius: 30px;
        background-color: #FDE9B1;
    }

    .functionItem {
        width: 100%;
        height: 60%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .functionOne,
    .functionTwo {
        width: 400px;
        height: 228px;
        border-radius: 30px;
        border: 3px solid black;
    }

    .functionOne {
        background: url('../assets/img/indexImg3.jpg') no-repeat center;
        background-size: 100%;
    }

    .functionTwo {
        background: url('../assets/img/indexImg4.jpg') no-repeat center;
        background-size: 100%;
    }

    .functionOneP {
        width: 100%;
        height: 100%;
        color: black;
        font-size: 36px;
        font-weight: bold;
    }
</style>